<template>
	<view>
		<view class="header">
			信息管理
		</view>
		<view class="content">
			<view class="action_content">
				<view class="action_btn">
					execl导入
				</view>
				<view class="action_btn" @click="addTeacherShow">
					单条录入
				</view>
			</view>
			<view class="card_content">
				<view class="data_title">
					本月数据统计
				</view>
				<view class="data_content">
					<view class="cart_item">
						<view class="card_number">
							128
						</view>
						<view class="">
							总记录数
						</view>
					</view>
					<view class="cart_item">
						<view class="card_number">
							45
						</view>
						<view class="">
							本月新增
						</view>
					</view>
				</view>
			</view>
			<view class="act_content">
				<view class="act_btn">
					保存
				</view>
				<view class="act_btn">
					备份
				</view>
				<view class="act_btn">
					打印
				</view>
			</view>
		</view>

		<!-- <view class="teacher-list" style="margin-top:40rpx;">
  <view v-for="item in teacherList" :key="item.id" class="teacher-item" style="margin-bottom:20rpx;">
    <text>{{item.name}} - {{item.sex}} - {{item.phone}} - {{item.card}}</text>
    <button @click="deleteTeacher(item.id)" style="margin-left:20rpx;">删除</button>
  </view>
</view> -->
	</view>
	<uni-popup ref="popup" v-model="showForm" type="center">
		<view class="popup-form">
			<view class="form-title">录入教师信息</view>
			<input v-model="newTeacher.name" placeholder="姓名" class="form-input" />
			<input v-model="newTeacher.sex" placeholder="性别" class="form-input" />
			<input v-model="newTeacher.phone" placeholder="电话" class="form-input" />
			<input v-model="newTeacher.card" placeholder="身份证" class="form-input" />
			<view class="form-actions">
				<button @click="submitTeacher" class="form-btn">保存</button>
				<button @click="showForm = false" class="form-btn cancel">取消</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	// import uniSqlite from '@/uni_modules/uni-sqlite/js_sdk/uni-sqlite.js'
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				showForm: false,
				teacherList: [],
				newTeacher: {
					name: '',
					sex: '',
					phone: '',
					card: ''
				}
			}
		},
		onLoad() {
			// this.openDB()
		},
		methods: {
			openDB() {
				uniSqlite.openDatabase({
					name: 'teacherDB',
					success: (res) => {
						this.createTable()
					}
				})
			},
			createTable() {
				uniSqlite.executeSql({
					name: 'teacherDB',
					sql: `CREATE TABLE IF NOT EXISTS teacher (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          name TEXT,
          sex TEXT,
          phone TEXT,
		  card TEXT
        )`,
					success: (res) => {
						this.getTeachers()
					}
				})
			},
			addTeacher() {
				const t = this.newTeacher
				if (!t.name || !t.sex || !t.phone || !t.card) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				uniSqlite.executeSql({
					name: 'teacherDB',
					sql: `INSERT INTO teacher (name, sex, phone, card) VALUES (?, ?, ?)`,
					values: [t.name, t.sex, t.phone, t.card],
					success: (res) => {
						this.newTeacher = {
							name: '',
							sex: '',
							phone: '',
							card: ''
						}
						this.getTeachers()
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
					}
				})
			},
			getTeachers() {
				uniSqlite.selectSql({
					name: 'teacherDB',
					sql: 'SELECT * FROM teacher',
					success: (res) => {
						this.teacherList = res.data
					}
				})
			},
			deleteTeacher(id) {
				uniSqlite.executeSql({
					name: 'teacherDB',
					sql: `DELETE FROM teacher WHERE id=?`,
					values: [id],
					success: (res) => {
						this.getTeachers()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				})
			},
			addTeacherShow() {
				
				console.log(111)
				this.showForm = true
			},
			submitTeacher() {
				this.addTeacher()
				this.showForm = false
			},
		}
	}
</script>

<style>
	.header {
		background-color: #c41e3a;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 20rpx;
	}

	.content {
		padding: 30rpx;
	}

	.action_content {
		display: flex;
		justify-content: space-between;

	}

	.action_btn {
		width: calc(50% - 20rpx);
		height: 80rpx;
		background-color: #c41e3a;
		color: #fff;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.card_content {
		margin: 30rpx 0px;
		padding: 40rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		box-shadow: 0px 3px 5px 0px rgba(219, 219, 219, 0.6);
		color: #888e97;
	}

	.data_title {
		margin-bottom: 20rpx;
	}

	.data_content {
		display: flex;
		justify-content: space-between;
	}

	.cart_item {
		text-align: center;
		padding: 30rpx;
	}

	.card_number {
		font-size: 48rpx;
		font-weight: 500;
		color: #c41e3a;
	}

	.act_content {
		display: flex;
		justify-content: space-between;
	}

	.act_btn {
		width: 30%;
		border-radius: 10rpx;
		color: #c41e3a;
		border: 4rpx solid #c41e3a;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
	}

	.popup-form {
		width: 600rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.form-input {
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-bottom: 24rpx;
		font-size: 28rpx;
	}

	.form-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.form-btn {
		flex: 1;
		margin: 0 10rpx;
		background: #c41e3a;
		color: #fff;
		border-radius: 8rpx;
	}

	.form-btn.cancel {
		background: #eee;
		color: #333;
	}
</style>